<template>
  <div>
    <p ref="p">数字：{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 100
    }
  },
  methods: {
    add() {
      // 修改数据, 数据变化 => 视图会自动更新
      // 注意：vue是异步更新dom => vue不会在数据修改之后，立刻更新dom
      // vue会等当前的主线程代码执行完成（积累了一定的修改）， 一起更新 => 提升了性能
      this.count++
      this.count++

      console.log(this.count)
      // console.log(this.$refs.p.innerHTML)

      // 只能等dom更新完了，再获取, setTimeout 宏任务
      // 第一个宏任务执行完，会看有没有微任务，执行微任务，浏览器更新渲染完成，执行下一个宏任务
      // setTimeout(() => {
      //   // 希望拿到更新后的dom结构innerHTML，打印出来
      //   console.log(this.$refs.p.innerHTML) // 数字： 102
      // }, 0)

      // vue中内置一个函数 $nextTick(回调) 这个回调函数，会在本次dom更新完成之后，立刻执行
      this.$nextTick(() => {
        console.log(this.$refs.p.innerHTML)
      })
    }
  }
}
</script>

<style></style>
